<template>
  <!-- 地图 -->
  <el-dialog
    v-el-drag-dialog
    append-to-body
    title="位置查询"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <div
      v-if="visible"
      v-loading="!center"
      element-loading-text="正在加载地图"
    >
      <el-form ref="dataForm" :inline="true" class="form" :rules="rules" :model="temp">
        <el-form-item label="地址查询" prop="address">
          <el-input v-model="temp.address" placeholder="" style="width: 450px;" clearable @keyup.enter.native="search" />
        </el-form-item>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
        <span>点击地址可直接进行定位</span>
      </el-form>
      <baidu-map
        class="bm-view"
        :center="center"
        :scroll-wheel-zoom="true"
        :zoom="zoom"
        inertial-dragging
        @ready="mapReady"
        @click="selectPoint"
      >
        <bm-marker
          :position="point"
          :dragging="true"
        />
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :show-address-bar="true"
          :auto-location="true"
        />
        <bm-local-search :keyword="keyword" :auto-viewport="true" @searchcomplete="search" />
      </baidu-map>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    name: 'location',
    data() {
      return {
        visible: false,
        geolocation: null,
        temp: {
          address: ''
        },
        myGeo: null,
        center: {
          lng: null,
          lat: null
        },
        zoom: 15,
        point: {
          lng: 116.403765,
          lat: 39.914850
        },
        keyword: '',
        province: '',
        city: '',
        district: '',
        rules: {
          address: [{ required: true, message: '请输入查询地址', trigger: 'change' }]
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          if (temp && JSON.stringify(temp) !== '{}') {
            this.currentInfo = temp
            this.center.lng = Number(temp.longitude)
            this.center.lat = Number(temp.latitude)
            this.center = { ...this.center }
            this.point = { ...this.center }
          }
          this.visible = true
        })
      },
      mapReady({ BMap, map }) {
        const _this = this
        // 获取自动定位方法
        this.geolocation = new BMap.Geolocation()
        // 获取逆解析方法实例
        this.myGeo = new BMap.Geocoder()
        if (this.center.lng && this.center.lat) {
          return
        }
        // 获取自动定位获取的坐标信息
        this.geolocation.getCurrentPosition(function(r) {
          console.log('对应id', r)
          if (r) {
            _this.center = {
              lng: r.point.lng,
              lat: r.point.lat
            }
            _this.point = {
              lng: r.point.lng,
              lat: r.point.lat
            }
            _this.pointToAddress(r.point)
          } else {
            const companyInfo = JSON.parse(sessionStorage.getItem('companyInfo'))
            console.log('companyInfo', companyInfo)
            if (companyInfo) {
              _this.center = companyInfo.city || '北京'
              _this.zoom = 12
            }
          }
          // _this.pointToAddress(r.point)
        }, { enabaleHighAccuracy: false })
      },
      // 鼠标点击地图定位点
      async selectPoint({ type, target, point, pixel, overlay }) {
        this.point = point
        console.log(this.point)
        this.pointToAddress(point)
      },
      // 根据坐标逆解析获取地址详细描述
      pointToAddress(point) {
        const _this = this
        this.myGeo.getLocation(point, function(result) {
          if (result) {
            // console.log(result, 111111111)
            _this.province = result.addressComponents.province
            _this.city = result.addressComponents.city
            _this.district = result.addressComponents.district
            let address = ''
            const ssq = _this.province + _this.city + _this.district
            if (result.surroundingPois.length > 0) {
              address = result.address + result.surroundingPois[0].title
            } else {
              address = result.address
            }
            // console.log(address.split(ssq)[1])
            // console.log(_this.point)
            _this.$set(_this.temp, 'address', address.split(ssq)[1])
          }
        })
      },
      search() {
        this.keyword = this.temp.address
      },
      success() {
        if (this.province) {
          this.resolve({
            address: this.temp.address,
            province: this.province,
            city: this.city,
            district: this.district,
            point: this.point,
            center: this.center
          })
        } else {
          this.resolve({
            address: this.currentInfo.address,
            province: this.currentInfo.provinceName,
            city: this.currentInfo.cityName,
            district: this.currentInfo.countryName,
            streetName: this.currentInfo.streetName,
            street: this.currentInfo.street,
            point: { lng: this.currentInfo.longitude, lat: this.currentInfo.latitude },
            center: { lng: this.currentInfo.longitude, lat: this.currentInfo.latitude }
          })
        }
        this.visible = false
      },
      reset() {
        this.temp.address = ''
        this.province = ''
        this.city = ''
        this.district = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>
